<template>
  <view class="content">
    <!-- <view class="btn add-btn" @click="toAddTemplate"> 新增模塊 </view> -->
    <view class="list-warp">
      <view v-for="(v, k) in list" :key="k" class="each">
        <view class="each-list">
          <view class="each-msg">
            <view class="title">
              {{ v.form_template_module_name }}
            </view>
            <view class="des"> {{ formatDate(v.create_time) }} 創建 </view>
          </view>
          <view class="each-icon">
            <u-image
              src="/static/form-icon.png"
              width="152rpx"
              height="173rpx"
              mode="aspectFill"
              border-radius="16rpx"
            ></u-image>
          </view>
        </view>
        <view class="btns">
          <view class="btn" @click.stop="toEditTemplate(v)"> 編輯 </view>
          <view class="btn" @click.stop="onDelete(v, k)"> 刪除 </view>
          <view class="btn" @click.stop="toDetail(v, k)"> 查看 </view>
        </view>
      </view>
    </view>
    <u-popup
      v-model="showPopup"
      border-radius="14"
      mode="center"
      width="600rpx"
      height="300rpx"
    >
      <view class="popup-content">
        <view class="popup-tips"> 提示 </view>
        <view class="popup-c"> 您確定刪除此模塊嗎？ </view>
        <view class="popup-btns">
          <view class="btn" @click="showPopup = false"> 取消 </view>
          <view class="btn" @click="onComfirm"> 確定 </view>
        </view>
      </view>
    </u-popup>
    <uni-popup ref="message" type="message">
			<uni-popup-message type="warn" message="此操作需要電腦端操作" :duration="3000"></uni-popup-message>
		</uni-popup>
  </view>
</template>

<script>
import ZPaging from '@/node_modules/z-paging/components/z-paging/z-paging.vue'
import NavBar from '@/component/NavBar'
import { deleteModule } from '@/api/template.js'
export default {
  name: 'checkForm',
  components: {
    ZPaging,
    NavBar,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showPopup: false,
      curItem: {},
      curIndex: 0,
      isPc: false,
    }
  },
  mounted() {
			const app = getApp();
			this.isPc = app.globalData.isPc
  },
  methods: {
    onDelete(v, i) {
      this.showPopup = true
      this.curItem = v
      this.curIndex = i
    },
    onComfirm(item) {
      deleteModule({
        uid: uni.getStorageSync('uid'),
        id: this.curItem.id,
      }).then((res) => {
        this.$Toast('操縱成功')
        this.showPopup = false
        this.list.splice(this.curIndex, 1)
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/checkForm/fragment/addOrEditFragment?id=${item.id}&isLook=true`,
      })
    },
    // 編輯模板
    toEditTemplate(item) {
      uni.navigateTo({
        url: `/pages/checkForm/fragment/addOrEditFragment?id=${item.id}`,
      })
    },
    // 新增模版片段
    toAddTemplate() {
      console.log(this.isPc,this.$refs.message)
      if(!this.isPc){
					this.$refs.message.open('center')
          setTimeout(()=>{
						this.$refs.message.close()
					},500)
					return
				}
      uni.navigateTo({
        url: `/pages/checkForm/fragment/addOrEditFragment`,
      })
    },
    //時間戳轉換為2025-01-01 12:12：12
    formatDate(time) {
      let date = new Date(time * 1000)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      return (
        year +
        '-' +
        (month < 10 ? '0' + month : month) +
        '-' +
        (day < 10 ? '0' + day : day) +
        ' ' +
        (hour < 10 ? '0' + hour : hour) +
        ':' +
        (minute < 10 ? '0' + minute : minute) +
        ':' +
        (second < 10 ? '0' + second : second)
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  padding: 90rpx 24rpx;
  .search {
    margin-bottom: 20rpx;
  }
  .list-warp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 34rpx;
    .each {
      min-width: 700rpx;
      box-sizing: border-box;
      padding: 32rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #e7e7e7;
      .each-list {
        display: flex;
        justify-content: space-between;
        .title {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
        }
        .des {
          font-weight: 400;
          font-size: 28rpx;
          color: #979797;
          margin: 30rpx 0;
        }
        .count {
          font-weight: 400;
          font-size: 28rpx;
          color: #3a78fc;
        }
      }
      .btns {
        display: flex;
        margin-top: 30rpx;
        gap: 28rpx;
        .btn {
          width: 156rpx;
          height: 58rpx;
          line-height: 58rpx;
          background: #ffffff;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          border: 2rpx solid #3a78fc;
          text-align: center;
          color: #3a78fc;
          cursor: pointer;
          &:first-child {
            background: #3a78fc;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.popup-content {
  padding-top: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 300rpx;

  .popup-tips {
    font-size: 36rpx;
    text-align: center;
    color: red;
  }

  .popup-btns {
    display: flex;
    width: 100%;
    border-top: 1px solid #ebedf0;

    .btn {
      width: 50%;
      text-align: center;
      line-height: 88rpx;
      cursor: pointer;

      &:first-child {
        border-right: 1px solid #ebedf0;
        color: #323233;
      }

      &:last-child {
        color: red;
      }
    }
  }
}
.add-btn {
  width: 156rpx;
  height: 58rpx;
  line-height: 58rpx;
  background: #ffffff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 2rpx solid #3a78fc;
  text-align: center;
  color: #3a78fc;
  cursor: pointer;
  &:first-child {
    background: #3a78fc;
    color: #ffffff;
    margin-bottom: 24rpx;
  }
}
</style>
